<template>
    <div class="c-table">
        <el-table ref="multipleTable" :data="tableData" border style="width: 100%" :height="height"
                  :default-sort="{prop: 'date', order: 'descending'}" @selection-change="handleSelectionChange">
            <el-table-column
                    v-if="checkbox"
                    fixed
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    v-if="index"
                    fixed
                    width="55"
                    type="index"
                    label="序号"
                    :index="indexMethod">
            </el-table-column>
            <el-table-column fixed prop="date" label="日期" sortable width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" sortable width="180"></el-table-column>
            <el-table-column prop="address" :formatter="formatter" label="地址"></el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="250">
                <template #default="scope">
                    <el-button type="primary" @click="handleClick(scope.row)"  size="small">查看</el-button>
                    <el-button type="success"  size="small">编辑</el-button>
                    <el-button type="warning" @click="deleteRow(scope.$index, tableData)"  size="small">
                        移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-button  @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
            <el-button @click="toggleSelection()">取消选择</el-button>
        </div>
    </div>
</template>

<script lang="ts">
    import {defineComponent, ref, nextTick} from 'vue';

    export default defineComponent({
        name: 'c-table',
        props: {
            height: {
                type: Number,
                default: 250
            },
            checkbox: {
                type: Boolean,
                default: false
            },
            index:{
                type: Boolean,
                default: true
            }
        },
        setup() {
            const tableData = ref([{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
                zip: 200333
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄',
                zip: 200333
            }]);
            const multipleSelection = ref([]);
            // const column= ref(null);
            // let multipleTable = ''
            // const setRef = el => {
            //     multipleTable = el;
            // }


            const multipleTable = ref(null)//如果ref 页面也有一个multipleTable那么页面会把ref的multipleTable捆绑上
            nextTick(() => {
                // console.log(multipleTable);
            })

            function handleClick(row: string) {
                console.log(row);
            }

            function deleteRow(index: number, rows: []) {
                rows.splice(index, 1);
            }

            function handleSelectionChange(val) {
                // console.log(val);
                multipleSelection.value = val;
            }

            function toggleSelection(rows: [] | undefined) {
                if (rows) {
                    rows.forEach(row => {
                        (multipleTable.value as any).toggleRowSelection(row);
                    });
                } else {
                    (multipleTable.value as any).clearSelection();
                }
            }

            function indexMethod(index) {
                return index + 1;
            }

            function formatter(row, column) {
                // console.log(column);
                return row.address;
            }

            return {
                tableData,
                multipleSelection,
                multipleTable,
                handleClick,
                indexMethod,
                deleteRow,
                handleSelectionChange,
                toggleSelection,
                formatter
            }
        }
    });
</script>

<style scoped>

</style>
